﻿<!DOCTYPE html xml:lang="utf-8" lang="utf-8">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />


<link href='../jquery.qtip.custom/jquery.qtip.min.css' rel='stylesheet' />
<script src='../lib/jquery.min.js'></script>
<script src='../jquery.qtip.custom/jquery.qtip.min.js'></script>

</head>
<body>
<a href="#test">Sample link</a>
<div class="tooltiptext">
    <!--Complex <b>inline</b> <i>HTML</i> in your <u>config</u>-->
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>4</td>
		</tr>
	</table>
</div>
 <script type="text/javascript">  
// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
             content: {
                 text: $(this).next('.tooltiptext')
             }
         });
     });
 });
</script>  
</body>
</html>